<!-- 视图轨迹 -->

<template>
  <div v-show="!hide && arr.length" class="Secure-MapView-track">
    <svg>
      <line
        v-for="item in lineList"
        :key="item[0]"
        :x1="item[1]"
        :y1="item[2]"
        :x2="item[3]"
        :y2="item[4]"
        :stroke="item[5]"
        :stroke-width="item[6]"
        :stroke-dasharray="item[7]"
      />
    </svg>

    <div v-for="item in indexList" :key="item.id" :class="item.class" :style="item.style" @click="openPoint">
      {{ item.text }}
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import props from './props'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'ViewTrack',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb('map', 'map_'), CORE.mixInfo('point', 'point_')],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 父组件视图
     */
    parentView() {
      return CORE.componentParent(this, 'MapView') || {}
    },

    /**
     * 折线列表
     */
    lineList() {
      const { arr, parentView: { scale = 1 } } = this
      const lineList = arr.map(({ longitude: x1, latitude: y1, track: { id: id1 } }, i) => {
        const { longitude: x2, latitude: y2, track: { id: id2, arriveTime } } = arr[i + 1] || { track: {} }
        if (!x1 || !y1 || !x2 || !y2) return null
        const stroke = arriveTime ? 'var(--Primary)' : 'var(--Info)'
        const width = 2 / scale
        const dasharray = arriveTime ? null : `${width * 3} ${width * 2}`
        return [`${id1}-${id2}`, x1, y1, x2, y2, stroke, width, dasharray]
      })
      return lineList.filter((item) => item)
    },

    /**
     * 序号列表
     */
    indexList() {
      const { arr, $parent: { map_readyInfo, readyImg }, parentView: { scale = 1 } } = this
      const lineList = arr.map(({ longitude: left, latitude: top, track: { id, arriveTime } }, i) => {
        if (!left || !top) return null

        const text = !i ? '起' : i === arr.length - 1 ? '终' : i + 1

        const color = !arriveTime ? '' : !i ? 'green' : i === length - 1 ? 'red' : 'blue'
        const className = `SecurePatrol-PatrolGaode-track-index flexCC track-${color}`

        const opacity = map_readyInfo && readyImg ? 1 : 0
        const transform = `translate(-50%, -50%) scale(${1 / scale})`

        return { id, text, class: className, style: { opacity, left, top, transform } }
      })
      return lineList.filter((item) => item)
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 方法
     */
    openPoint(item) {
      this.point_startInfo({ id: item.deviceId })
    },
  },
}
</script>
